{include file="public/header" /}
<link rel="stylesheet" href="/static/admin/css/base.css" media="all">
<style>
    html {
        background-color: #f2f2f2 !important;
    }
    .m-table {
        background-color: rgb(255, 255, 255);
        /*margin-top: 5px;*/
        display: none;
        z-index: 1005;
        position: absolute;
        width: 100%;
        /*max-width: 80%;*/
        box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    }

    #mTable_choose {
        margin: 0 !important;
    }

    .layui-table table tr:hover, .layui-table-hover {
        background-color: #FFF9E6 !important;
    }
    .layui-form-item {
        margin-bottom: 15px !important;
    }
</style>
<body>
<div class="x-body">
    <form action="{:url('saveSeckill')}" class="layui-form" id="form">
        <input type="hidden" name="id" value="{$info?$info.id:''}"/>

        <input type="hidden" name="seckill_id" value="{$info?$info.seckill_id:$seckill_id}"/>
        <div class="layui-form-item">
            <label class="layui-form-label">秒杀商品</label>
            <div class="layui-input-block">
                <input type="text" id="choose" name="name" value="" autocomplete="off"
                       placeholder="商品名称" class="layui-input">
                <input type="hidden" id="product_id" name="product_id" value="{$info?$info.product_id:''}" autocomplete="off" class="layui-input">
                <div id="mTable_wrap_choose" class="layui-anim layui-anim-scale m-table"
                     style="bottom: auto; display: none;">
                    <div class="search-triangle"></div>
                    <table class="layui-table" id="mTable_choose" lay-filter="mTable_choose"></table>
                </div>
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">库存</label>
            <div class="layui-input-inline">
                <input type="text" name="stock" lay-verify="required" lay-reqtext="请填写库存"
                placeholder="请填写库存" class="layui-input" value="{$info?$info.stock:''}"/>
            </div>
        </div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">每人限购</label>
            <div class="layui-input-inline">
                <input type="text" name="num" lay-verify="required" lay-reqtext="请填写每人限购数量"
                placeholder="请填写每人限购数量" class="layui-input" value="{$info?$info.num:'1'}"/>
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <button class="layui-btn" lay-filter="save" lay-submit formObj="#form">保存</button>
        </div>
    </form>
</div>
</body>
{include file="public/footer" /}
<script>
    layui.use(['form', 'table', 'form'], function () {
        table = layui.table;
        mTable_wrap_choose = $('#mTable_wrap_choose');
        form = layui.form;
        //编辑初始化
        var val=$("#product_id").val();
        if(val){
            $.get("{:url('seckillProduct/getProduct')}",{ids:val},function(data,status){
                console.log(data);
                $("#choose").val(data.data.title);
            });
        }
        $("#choose").on("input", function (e) {
            var value = e.delegateTarget.value;
            if (!value) {
                mTable_wrap_choose.hide();
                return false;
            }
            table.render({
                elem: '#mTable_choose'
                , id: 'mTable_choose'
                , url: '{:url("seckillProduct/getProduct")}?val=' + value
                , even: true
                , size: 'sm'
                , cols: [[
                    {field: 'id', title: 'ID'}
                    ,{field: 'title', title: '商品名称'}
                ]]
                , page: true
            });
            mTable_wrap_choose.show();
        });

        //触发行单击事件
        table.on('row(mTable_choose)', function (obj) {
            if (!obj.data.id) return false;
            mTable_wrap_choose.hide();
            $("#choose").val(obj.data.title);
            $("#product_id").val(obj.data.id);
        });

    });
</script>
</html>